import React, { FC, useState } from 'react'
import noDataUrl from '@/assets/images/common_empty.png'
import pic_fl from '@/assets/images/orderlist/pic_fl.png'
import state_daizhifuUrl from '@/assets/images/orderlist/state_daizhifu.png'
import { useNavigate } from 'react-router-dom'
import { EOrderParamType, EOrderParamTypeStr } from '@/types/orderList'
import { EOrderStatus } from '@/types/enum'

export const CannelStatus: FC<{}> = () => {
  return (
    <>
      <span className=" relative w-r2.0 h-r2.0 inline-block mr-r0.5 ">
        <i className="w-r2.0 h-r2.0 iconfont icon-state_cancel"></i>
      </span>
      <span className=" text-r2.0 text-gray-999999 font-medium-family">已取消</span>
    </>
  )
}

export const SuccessStatus: FC<{}> = () => {
  return (
    <>
      <span className=" relative w-r2.0 h-r2.0 inline-block mr-r0.5 ">
        <i className="w-r2.0 h-r2.0 iconfont icon-state_payed"></i>
      </span>
      <span className=" text-r2.0 text-gray-333333 font-medium-family">已支付</span>
    </>
  )
}

export const PayingStatus: FC<{}> = () => {
  return (
    <>
      <span className=" relative w-r2.0 h-r2.0 inline-block mr-r0.8 ">
        <img alt="" className="w-r2.0 h-auto absolute top-r0.2" src={state_daizhifuUrl}></img>
      </span>
      <span className=" text-r2.0 text-gray-333333 font-medium-family inline-block mr-r0.5">
        待支付
      </span>
      <span className=" inline-block  text-r1.3   text-orange-FF3627 font-medium-family">
        未支付订单15分钟后取消
      </span>
    </>
  )
}

const OrderDetailStatus: FC<{ type: EOrderStatus }> = (props) => {
  return (
    <div className=" h-auto p-r1.2  w-auto    text-gray-999999 ">
      {props.type === EOrderStatus.notPay ? <PayingStatus></PayingStatus> : null}
      {props.type === EOrderStatus.paySuccess ? <SuccessStatus></SuccessStatus> : null}
      {props.type === EOrderStatus.channalOrder ||
      props.type === EOrderStatus.handerChannalOrder ? (
        <CannelStatus></CannelStatus>
      ) : null}
    </div>
  )
}
export default OrderDetailStatus
